<template>
    <div>
        <div class="c-card-detail-b">
            <div class="y13">
                <img src="@/assets/images/13pic.jpg" class="pic13" />
                <div class="y13_container">
                    <div class="title">《十三邀》</div>
                    <div class="time">时长50分钟</div>
                    <div class="flex">
                        <div>许知远</div>
                        <div>脱口秀</div>
                    </div>
                    <img class="pic13_min" src="@/assets/images/13pic-min.png" />
                </div>
                <div class="content">由腾讯新闻和单向空间联合出品的谈话节目，节目已播出四季，每一季采访13位具有指标意义的知名人士和意见领袖，与许知远一起，带着偏见看世界。</div>
            </div>
            <div class="title_wrap">
                <div class="title">COLMO·《十三邀 · 夏日特别版》</div>
            </div>
            <div class="movie_content">第五季播出前，COLMO携手《十三邀》，与许知远一起对话张亚东，回顾华语音乐近30年来的发展历程，听他们谈美与时代精神的关系，“穿过雾霭森林去寻找美”。</div>
            <div class="video">
                <video controls controlslist="nodownload" src="@/assets/images/video2.mp4"  poster="@/assets/images/video2-poster.png"></video>
            </div>
            <div class="zyd">
                <div class="left">
                    <img src="@/assets/images/zyd.png" />
                </div>
                <div class="right">
                    <div class="title">张亚东</div>
                    <div class="sp">理性与感性中独立平衡的音乐人</div>
                    <div class="content">著名音乐制作人、歌手、导演<br />有中国内地著名流行音乐家、内地流行音乐“教父”之称，王菲华语原创专辑《浮躁》监制，合作音乐人包括窦唯、朴树、李宇春、张靓颖等，知名文艺自媒体平台《理想国》音乐总监</div>
                </div>
            </div>
            <div class="title_wraps">
                <div class="title">精华观点</div>
            </div>
            <div class="comment" v-for="(item, index) in commentData" :key="index">
                <div class="left">
                    <img class="avatar" :src="item.img" />
                </div>
                <div class="right">
                    <div class="title">{{ item.title }}</div>
                    <div class="content">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <c-backTop @close="$emit('close')" />
    </div>
</template>
<script>
export default {
    data () {
        return {
            commentData: [
                {
                    img: require('@/assets/images/avatar-1.png'),
                    title: '许知远',
                    content: '我相信在一个价值混乱的时代，美会变得更凸显，因为它提供某种恒定的标准。'
                },
                {
                    img: require('@/assets/images/avatar-2.png'),
                    title: '张亚东',
                    content: '哪怕是在最困苦的时候，或者最不堪的时候，我们都在寻找那个美的东西，你一直没放弃找那个东西，这个可能是天性。'
                }
            ]
        }
    }
}
</script>
<style lang="less" scoped>
.c-card-detail-b{
    background-color: #fff;
    border-top: 1px solid #c9c9c9;
    padding: 0.51rem 0.4rem 0.5rem;
    .y13{
        border-bottom: 1px solid #c9c9c9;
        margin-bottom: 0.74rem;
        .pic13{
            width: 100%;
            display: block;
        }
        .y13_container{
            padding-left: 2.47rem;
            padding-top: 0.15rem;
            position: relative;
            margin-bottom: 0.37rem;
            .pic13_min{
                width: 2rem;
                height: 2.45rem;
                position: absolute;
                bottom: 0;
                left: 0.2rem;
                border-radius: 0.1rem;
                overflow: hidden;
            }
            .title{
                font-size: 0.3rem;
                color: #000000;
                margin-bottom: 0.1rem;
                margin-left: -0.15rem;
                font-weight: 700;
            }
            .time{
                font-size: 0.22rem;
                color: #9d9d9d;
                margin-bottom: 0.1rem;
            }
            .flex{
                display: flex;
                align-items: center;
                div{
                    padding: 0.04rem 0.1rem;
                    text-align: center;
                    border-radius: 0.07rem;
                    border: 1px solid #9d9d9d;
                    overflow: hidden;
                    color: #9d9d9d;
                    font-size: 0.22rem;
                    margin-right: 0.13rem;
                    &:last-of-type{
                        margin-right: 0;
                    }
                }
            }
        }
        .content{
            padding: 0 0.1rem 0 0.22rem;
            font-size: 0.22rem;
            line-height: 0.34rem;
            color: #000000;
            padding-bottom: 0.55rem;
        }
    }
    .zyd{
        display: flex;
        margin-bottom: 1.09rem;
        .left{
            height: 2.83rem;
            img{
                width: 2.13rem;
            }
        }
        .right{
            padding-left: 0.33rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 2.83rem;
            .title{
                font-size: 0.28rem;
                font-weight: 700;
            }
            .sp{
                font-size: 0.22rem;
                font-weight: 700;
            }
            .content{
                font-size: 0.22rem;
                line-height: 0.3rem;
            }
        }
    }
    &>.title_wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.43rem;
        .title{
            font-size: 0.3rem;
            color: #000000;
            font-weight: 700;
            text-align: center;
            display: inline-block;
            box-shadow: 0 -0.16rem 0px #cb8345 inset;
            padding-left: 0.15rem;
        }
    }
    .movie_content{
        padding: 0 0.15rem;
        font-size: 0.24rem;
        line-height: 0.36rem;
        margin-bottom: 0.85rem;
    }
    &>.video{
        width: 100%;
        display: block;
        margin-bottom: 1.15rem;
        video{
            width: 100%;
            height: 100%;
            outline: none;
        }
    }
    &>.title_wraps{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.21rem;
        .title{
            font-size: 0.3rem;
            color: #000000;
            font-weight: 700;
            box-shadow: 0 -0.16rem 0px #cb8345 inset;
            display: inline-block;
            padding: 0 0.1rem;
        }
    }
    &>.comment{
        padding: 0.52rem 0.1rem 0 0;
        display: flex;
        .left{
            align-items: flex-start;
            display: flex;
            .avatar{
                width: 0.88rem;
                height: 0.88rem;
                border-radius: 50%;
            }
        }
        .right{
            margin-left: 0.23rem;
            color: #000000;
            border-bottom: 1px solid #c9c9c9;
            .title{
                font-size: 0.3rem;
                margin-bottom: 0.22rem;
                font-weight: 700;
            }
            .content{
                font-size: 0.22rem;
                line-height: 0.32rem;
                padding-bottom: 0.57rem;
            }
        }
        &:last-of-type .right{
            border-bottom: 1px solid transparent;
        }
    }
}
</style>
